<template>
  <div>
    <a-form :model="listParams" size="small" class="form w-full flex flex-wrap my-10">
      <a-form-item hide-label class="w-42n mr-10">
        <a-select
          class="w-42n"
          v-model="listParams.platformId"
          placeholder="选择平台类型检索"
          @change="changeCurrent(1)"
        >
          <a-option value="" label="全部"></a-option>
          <a-option
            v-for="item in platformList"
            :key="item.platformId"
            :value="item.platformId"
            :label="item.title"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item hide-label class="w-42n mr-10">
        <a-select
          class="w-42n"
          v-model="listParams.orderStatus"
          placeholder="选择订单状态检索"
          @change="changeCurrent(1)"
        >
          <a-option :value="0" label="全部"></a-option>
          <a-option :value="1" label="已付款"></a-option>
          <a-option :value="10" label="已失效"></a-option>
          <a-option :value="2" label="已结算"></a-option>
          <a-option :value="5" label="违规订单"></a-option>
          <a-option :value="4" label="维权订单"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item hide-label class="w-fit mr-10">
        <a-input-group class="flex w-full">
          <a-select class="w-36n" v-model="key2">
            <a-option value="orderSn" label="订单号"></a-option>
            <a-option value="tradeId" label="子订单号"></a-option>
            <a-option value="goodsTitle" label="商品标题"></a-option>
            <a-option value="goodsId" label="商品ID"></a-option>
            <a-option value="goodsSign1" label="拼多多商品ID"></a-option>
            <a-option value="goodsSign2" label="淘宝商品ID"></a-option>
            <a-option value="shopName" label="店铺名称"></a-option>
          </a-select>
          <a-input class="w-36n" v-model="value2" @press-enter="changeCurrent(1)" placeholder="请输入" />
        </a-input-group>
      </a-form-item>
      <a-form-item hide-label class="w-fit mr-10">
        <ms-date2
          v-model:start="listParams.startTime"
          v-model:end="listParams.endTime"
          :showQuick="true"
          :allowClear="false"
          @dateChange="changeCurrent(1)"
        ></ms-date2>
      </a-form-item>
      <a-form-item hide-label class="w-fit">
        <a-button type="primary" size="small" @click="changeCurrent(1)">
          <template #icon>
            <icon-search />
          </template>
          <template #default>查询</template>
        </a-button>
        <a-button class="ml-m" size="small" @click="onResetSearch">
          <template #icon>
            <icon-sync />
          </template>
          <template #default>重置</template>
        </a-button>
      </a-form-item>
    </a-form>
    <GiTable
      row-key="tradeId"
      id="userOrderList"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :row-selection="{ type: 'checkbox', showCheckedAll: true }"
      :pagination="pagination"
      @refresh="getTableData"
      extraHide
      hide
    >
      <template #info="{ record }">
        <div class="flex">
          <a-image
            width="100"
            height="100"
            class="mr-10 cursor-pointer"
            :src="
              record.platformId == 6
                ? klPic
                : record.platformId == 17
                ? mtPic
                : record.platformId == 9
                ? mxPic
                : record.goodsImg
            "
          />
          <div class="flex-col m-relative flex-1 overflow-hidden">
            <div style="min-height: 22px" class="my-2 line-h-24 text-overflow-2">
              <div class="m-absolute t-0 l-0" v-if="record.sourceTypeName">
                <a-tag color="red">{{ record.sourceTypeName }}</a-tag>
              </div>
              <div
                v-if="record.priceCompareStatus == 1"
                class="m-absolute t-0"
                :style="{ left: `${record.sourceTypeName ? record.sourceTypeName.length * 14 + 16 : 0}px` }"
              >
                <a-tag color="#f53f3f">比价</a-tag>
              </div>
              <div
                :style="{
                  textIndent: `${
                    (record.sourceTypeName ? record.sourceTypeName.length * 14 + 18 : 0) +
                    (record.priceCompareStatus == 1 ? 42 : 0)
                  }px`
                }"
              >
                <a-tooltip :content="record.goodsTitle">
                  <span>{{ record.goodsTitle }}</span>
                </a-tooltip>
              </div>
            </div>
            <div class="flex flex-a-c text-size-13 text808080 my-2" v-if="record.shopName">
              <img src="@/assets/images/dianpu.png" alt="" class="mr-2 w-4n h-4n" />
              <span class="text-overflow-1 flex-1">{{ record.shopName }}</span>
            </div>
            <div class="text-size-12 flex flex-a-c">
              <ms-copy-div showLeftTitle :text="record.goodsId" title="商品ID"></ms-copy-div>
            </div>
          </div>
        </div>
      </template>
      <template #order="{ record }">
        <div class="w-full flex-col">
          <ms-copy-div showLeftTitle :text="record.orderSn" title="订单号"></ms-copy-div>
          <ms-copy-div showLeftTitle :text="record.tradeId" title="子订单号"></ms-copy-div>
          <div>
            订单状态:
            {{
              record.orderStatus == 1
                ? '已支付'
                : record.orderStatus == 2
                ? '已结算'
                : record.orderStatus == 10
                ? '失效'
                : '--'
            }}
          </div>
        </div>
      </template>
      <template #user="{ record }">
        <div class="w-full flex-col flex-j-c">
          <div>昵称: {{ record?.userInfo?.nickname || '--' }}</div>
          <div>邀请码: {{ record?.userInfo?.inviteCode || '--' }}</div>
          <div>手机号: {{ record?.userInfo?.mobile || '--' }}</div>
        </div>
      </template>
      <template #time="{ record }">
        <div class="w-full flex-col flex-j-c">
          <div>下单时间: {{ record.paidTime || '--' }}</div>
          <div>结算时间: {{ record.earningTime || '--' }}</div>
        </div>
      </template>
      <template #commission="{ record }">
        <div class="w-full flex-col">
          <div class="flex flex-a-c my-2" v-if="record.goodsPrice">
            商品价格:<span class="textd43030 text-size-14 font-bold">￥{{ record.goodsPrice }} </span>
          </div>
          <div>付款金额: ¥ {{ record.payPrice || '--' }}</div>
          <div>预估佣金: ¥ {{ record.commission }}</div>
        </div>
      </template>
      <template #number="{ record }">
        <div class="w-full flex-col">
          <div>商品数量: {{ record.goodsNum || '--' }}</div>
        </div>
      </template>
    </GiTable>
  </div>
</template>
<script setup>
import { Message } from '@arco-design/web-vue'
import { usePagination, usePlatform } from '@/hooks'
import { orderSearch } from '@/apis'
import dayjs from 'dayjs'
import { deepClone, deleteEmpty } from '@/utils/common'

const route = useRoute()
const columns = ref([
  {
    title: '商品信息',
    slotName: 'info',
    width: 330
  },
  {
    title: '订单信息',
    slotName: 'order',
    width: 250
  },
  {
    title: '时间',
    slotName: 'time',
    width: 250
  },
  {
    title: '佣金分配',
    slotName: 'commission',
    width: 200
  },
  {
    title: '数量',
    slotName: 'number',
    width: 150
  }
])

const loading = ref(false)
const exportLoading = ref(false)
const tableData = ref([])
const key2 = ref('orderSn')
const value2 = ref('')
const checkbox = ref([])
const klPic = 'https://images.maishou88.com/admin/union_activities/20230829/20230829111243_5680.png'
const mtPic = 'https://images.maishou88.com/admin/union_activities/20230829/20230829111325_4046.png'
const mxPic = 'https://images.maishou88.com/admin/union_activities/20230829/20230829111344_8206.png'

const { platformList, getPlatformList, formatPlatform } = usePlatform()
getPlatformList()
const listParams = reactive({
  page: 1,
  size: 15,
  startTime: dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  platformId: undefined,
  orderStatus: undefined,
  inviteCode: route.query.iId || route.query.inviteCode
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })
// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.size = pagination.pageSize
    const param = deepClone(listParams)
    param[key2.value] = value2.value
    if (param['goodsSign1']) {
      param['goodsSign'] = param['goodsSign1']
    } else if (param['goodsSign2']) {
      param['goodsSign'] = param['goodsSign2']
    }
    if (param.orderStatus == 0) param.orderStatus = undefined
    const res = await orderSearch(deleteEmpty(param))
    tableData.value = res.data.data.map((item) => {
      return {
        ...item,
        sourceTypeName: formatPlatform(item.platformId)
      }
    })
    setTotal(res?.data?.total || 0)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  if (route.query.goodsId) {
    key2.value = 'goodsId'
    value2.value = route.query.goodsId
    listParams.startTime = route.query.startTime || undefined
    listParams.endTime = route.query.endTime || undefined
  }
  getTableData()
})

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.platformId = listParams.orderStatus = undefined
  key2.value = 'tradeId'
  value2.value = ''
  checkbox.value = []
  listParams.startTime = dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss')
  listParams.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  changeCurrent(1)
}
</script>
<style lang="scss" scoped>
.textd90000 {
  color: #d90000;
}
.aggs {
  width: fit-content;
  line-height: 26px;
  background-color: rgb(var(--primary-1));
  box-shadow: rgb(var(--primary-1)) solid 1px;
  border-radius: 4px;
  border: 1px solid $color-theme;
}
.text808080 {
  color: #808080;
}
.text-size-13 {
  font-size: 13px;
}
.textd43030 {
  color: #d43030;
}
.text2a82e4 {
  color: #2a82e4;
}
</style>
